<template>
<router-link to="ShowStaffFinancing">用户理财项目列表</router-link>

    <h1>(管理员)用户投资项目列表</h1>

    <table class=" table table-border" border="1">
        <thead >
            <tr>
                <th>投资项目编号</th>
                <th>状态项目名称</th>
                <th>投资总额度</th>
                <th>已投资额度</th>
                <th>剩余额度</th>
                <th>投资人数</th>
                <th>操作</th>
            </tr>
        </thead>

        <tbody>
            <tr v-for="item in InversShow">
                <td>{{ item.I_Id  }}</td>
                <td>{{ item.I_Name }}</td>
                <td>{{ item.I_Budget }}</td>
                <td>{{ item.I_Receive }}</td>
                <td>{{ item.I_Amount }}</td>
                <td>{{ item.I_Number }}</td>
                <td>
                    <a href="#" @click="jump(item.I_Id)" >用户投资明细</a>  
                </td>
            </tr>
        </tbody>

    </table>
    <span>
        当前共{{Info.totalCount  }}条数据,每页显示{{Info.pageSize  }}条数据,当前第{{ Info.pageCount }}页/{{ Info.PageIndex }}页
        <a href="#" @click="PageLoadInfo('F')" >首页</a>
        <a href="#" @click="PageLoadInfo('U')" >上一页</a>
        <a href="#" @click="PageLoadInfo('N')" >下一页</a>
        <a href="#" @click="PageLoadInfo('E')" >尾页</a>
    </span>

    <select @change="ChangSiaze" v-model="Info.Csize" >
        <option value="1">==1条每页==</option>  
        <option value="2">==2条每页==</option>
        <option value="3">==3条每页==</option>
    </select>

    <input type="text" v-model="Info.Cindex" style="width: 30px;" />
    <input type="button" value="跳转" @click="ChangIndex" class="btn btn-success"/>

</template>

<script setup lang="ts">
import { ref,onMounted } from 'vue';
import axios from 'axios';
import { useRouter } from 'vue-router';

const router = useRouter();

//用于显示的响应式数组
const InversShow = ref([{
    I_Id:0,
    I_Name:"",
    I_Budget:"",
    I_Receive:"",
    I_Amount:"",
    I_Number:'',
}]);

//用于查询的响应式对象
const search = ref({
    IName:"",
    MinMoney:"",
    MaxMoney:"",
})

//用于分页的响应式对象
const Info = ref({
    PageIndex:1,
    pageSize:1,
    totalCount:0,
    pageCount:0,
    Csize:1,
    Cindex:"",
})

onMounted(()=>{
    ShowInvers();
})

//显示所有数据的方法
const ShowInvers =() =>{
    axios({
        url:"http://localhost:53279/api/Invest/ShowInvestInfo",
        method:"get",
        params:{
            IName:search.value.IName,
            MinMoney:search.value.MinMoney,
            MaxMoney:search.value.MaxMoney,
            PageIndex:Info.value.PageIndex,
            pageSize:Info.value.pageSize,
        }
    })
    .then(function(res){
        console.log(res.data.Ilist);
        InversShow.value = res.data.Ilist;
        //将数据总数 总页数统一赋值
        Info.value.totalCount = res.data.totalCount;
        Info.value.pageCount = res.data.pageCount;
    })
    .catch(function(err){
        console.log(err);
    })
}

//用于分页方法
const PageLoadInfo =(Choose:string) =>{
    //type:F首页,U上一页,N下一页,E尾页
    switch(Choose){
        case'F':
        Info.value.PageIndex=1;
        break;
        case'U':
        if(Info.value.PageIndex>1){
            Info.value.PageIndex--;
        }
        else{
            alert("当前已经是首页了");
        }
        break;
        case'N':
        if(Info.value.PageIndex<Info.value.pageCount){
            Info.value.PageIndex++;
        }
        else{
            alert("当前已经是最后一页了");
        }
        break;
        case "E":
        Info.value.PageIndex = Info.value.pageCount;
        break;
    }
    ShowInvers();
}

//改变页容量方法
const ChangSiaze = () =>{
    //获取当前选择的每页显示数据
    var size = Info.value.Csize;
    Info.value.pageSize = size;
    ShowInvers();
}

//跳转某页方法
const ChangIndex = () =>{
    //获取用户输入数据
    var pIndex = Info.value.Cindex;
    //判断非空
    if(pIndex==""){
        alert("跳转页码不能为空");
        Info.value.Cindex="";
        return;
    }

    //判断输入是否为数字
    if(isNaN( Number(pIndex) )){
        alert("跳转页码必须为数字");
        Info.value.Cindex="";
        return;
    }

    //判断输入页码必须不能小于1
    if(Number(pIndex)<1){
        alert("跳转页码最小值为1");
        Info.value.Cindex="";
        return;
    }

    //判断输入页码必须小于总页码
    if(Number(pIndex)>Info.value.pageCount){
        alert("输入页码不能超过总页码");
        Info.value.Cindex="";
        return;
    }
    Info.value.PageIndex = Number(pIndex);
    ShowInvers();
}

const jump = (Iid:number) =>{
   router.push({
        name:'ShowInvers',
        params:{
            Iid:Iid
        }
    })
}

</script>